<template>
    <div v-loading="loading" element-loading-text="上传中" class="avatar-uploader">
        <el-upload
                action="https://127.0.0.1"
                drag
                :show-file-list="false"
                :before-upload="beforeAvatarUpload">
            <e-img v-if="value" :src="value" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div contentEditable="true" ref="divimg" @keydown="hookKey" @keyup="hookKey" @paste.prevent.stop="Paste">点我按Ctrl+V粘贴</div>
    </div>
</template>
<style type="text/scss" lang="scss">
    $width:150px;
    .avatar-uploader{
        width: $width;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .el-upload-dragger{
            width: auto;
            height: auto;
        }
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 38px;
        color: #8c939d;
        width: $width;
        height: $width;
        line-height: $width;
        text-align: center;
    }
    .avatar {
        width: $width;
        height: $width;
        display: block;
    }
</style>
<script>
    import api from "@/api";
    import EImg from "@/components/image/img";

    export default {
        name: "e-upload-image",
        components: {EImg},
        data() {
            return {
                loading:false,
                //imageUrl:''
            }
        },
        props: {
            value:String
        },
        computed: {},
        methods: {

            beforeAvatarUpload(file) {
                // 设置加载状态：this.loading = true，这通常用于显示加载指示器
                this.loading = true;
                // 上传文件：调用api.attachment.upload(file)方法上传文件，
                // 该方法返回一个Promise。
                api.attachment.upload(file).then(file=>{
                    // 处理成功响应：上传成功后，设置this.loading = false，
                    // 然后通过this.$emit('input', file)触发input事件，将上传的文件传递出去。
                    this.loading = false;
                    this.$emit('input' , file);
                }).catch(err=>{
                    // 处理错误响应：如果上传失败，设置this.loading = false，
                    // 并通过this.$message.error(err)显示错误消息。
                    this.loading = false;
                    this.$message.error(err);
                })
                // 返回false：阻止默认的文件上传行为。
                return false;
            },

            // 检查Ctrl键：如果没有按下Ctrl键，则调用e.preventDefault()阻止默认行为。
            // 拦截和处理特定的键盘事件   防止用户在没有按Ctrl键的情况下进行某些操作。
            hookKey(e){
                if(!e.ctrlKey){
                    e.preventDefault();
                }
            },


            Paste(e){
                // 获取粘贴的图像：调用this.getPasteImage(e)方法获取粘贴的图像项目
                var items = this.getPasteImage(e);
                // 处理图像文件：如果找到图像项目，遍历这些项目。

                if(items){
                    for (var i=0;i<items.length;i++)
                    {
                        var file = items[i];
                        // 如果项目有getAsFile方法，调用该方法获取文件对象。
                        if (file.getAsFile) file = file.getAsFile();
                        // 如果文件对象存在，并且文件类型是图像且文件大小大于0，
                        if (file && file.type && /^image\//.test(file.type) && file.size > 0) {
                            // 调用this.beforeAvatarUpload(file)方法上传图像。
                            this.beforeAvatarUpload(file);
                        }
                    }
                }
            },

            getPasteImage(e) {
                var ret = false;
                // 检查粘贴板数据：检查事件对象的clipboardData和clipboardData.items属性。
                if (e.clipboardData && e.clipboardData.items) {
                    // 查找图像项目：遍历clipboardData.items，如果找到图像类型的项目，设置ret = true。
                    for (var i = 0; i < e.clipboardData.items.length; i++) {
                        // 返回结果：如果找到图像项目，返回clipboardData.items；否则，返回null。
                        if (/^image\//.test(e.clipboardData.items[i].type)) {
                            ret = true;
                            break;
                        }
                    }
                }
                return ret ? e.clipboardData.items : null;
            }
        },
        created() {

        },
        mounted() {

        },
        beforeDestroy() {

        }

    }
</script>
